<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数组转换为CSV工具</title>
    <style>
        /* 页面样式 */
        body {
            font-family: 'Arial', sans-serif;
            background-color: #f4f7fc;
            color: #333;
            margin: 0;
            padding: 0;
        }

        /* 容器 */
        .container {
            width: 80%;
            max-width: 800px;
            margin: 50px auto;
            background-color: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        /* 标题 */
        h1 {
            text-align: center;
            color: #4CAF50;
            font-size: 24px;
        }

        /* 输入框样式 */
        .input-area {
            margin: 20px 0;
        }

        .input-area textarea {
            width: 100%;
            height: 150px;
            padding: 10px;
            font-size: 14px;
            border: 1px solid #ddd;
            border-radius: 4px;
            box-sizing: border-box;
        }

        /* 按钮样式 */
        button {
            background-color: #4CAF50;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
            width: 100%;
        }

        button:hover {
            background-color: #45a049;
        }

        /* 输出区域样式 */
        .output-area {
            margin-top: 20px;
            padding: 10px;
            border: 1px solid #ddd;
            background-color: #f9f9f9;
            font-family: 'Courier New', Courier, monospace;
            white-space: pre-wrap;
            word-wrap: break-word;
        }
    </style>
</head>

<body>
    <div class="container">
        <h1>数组转换为CSV工具</h1>

        <div class="input-area">
            <label for="arrayInput">请输入二维数组（每行以换行符分隔，每个元素以逗号分隔）：</label>
            <textarea id="arrayInput" placeholder="请输入数组数据，例如：\n[1, 2, 3]\n[4, 5, 6]"></textarea>
        </div>

        <button onclick="convertToCSV()">转换为CSV</button>

        <div class="output-area" id="outputArea">
            <p>转换结果将在这里显示。</p>
        </div>
    </div>

    <script>
        // 数组转CSV的核心功能
        const arrayToCSV = (arr, delimiter = ',') =>
            arr
                .map(i =>
                    i.map(v => (isNaN(v) ? `"${v.replace(/"/g, '""')}"` : v)).join(delimiter)
                )
                .join('\n');

        // 转换输入的数组为CSV格式并显示结果
        function convertToCSV() {
            const inputText = document.getElementById('arrayInput').value.trim();
            const outputArea = document.getElementById('outputArea');

            if (inputText === '') {
                outputArea.innerHTML = '<p style="color: red;">请输入有效的数组数据！</p>';
                return;
            }

            try {
                // 将输入的文本按行拆分为二维数组
                const arr = inputText.split('\n').map(line => line.split(',').map(item => item.trim()));
                const csv = arrayToCSV(arr);

                // 显示转换后的CSV内容
                outputArea.innerHTML = `<pre>${csv}</pre>`;
            } catch (error) {
                outputArea.innerHTML = '<p style="color: red;">输入格式错误，请确保输入的是有效的二维数组数据！</p>';
            }
        }
    </script>
</body>

</html>